<template>
    <div>
        <el-dialog v-model="dialogVisible" :title="title" width="30%">
            <el-form ref="ruleFormRef" :model="formName" :rules="rules" label-width="120px" class="demo-ruleForm"
                :size="formSize" status-icon>
                <el-form-item label="院系：" prop="department">
                    <el-input v-model="formName.department" />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm(ruleFormRef)">
                        添加
                    </el-button>
                    <el-button @click="resetForm(ruleFormRef)">重置</el-button>
                </el-form-item>
            </el-form>


        </el-dialog>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
const dialogVisible = ref(false)
import type { FormInstance, FormRules } from 'element-plus'

const props = defineProps({
    title: {
        default: '',
        type: String
    }
})
interface RuleForm {
    department: string

}
const formName = reactive<RuleForm>({
    department: ''
})
const showDio = () => {
    dialogVisible.value = true
}
const formSize = ref<'' | 'small' | 'default' | 'large'>()
const ruleFormRef = ref<FormInstance>()
const rules = reactive({
    department: [
        { required: true, message: '请输入院系名称', trigger: 'blur' },
    ],

})
const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            console.log('submit!')
        } else {
            console.log('error submit!', fields)
        }
    })
}

const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
}
// 要暴露方法

defineExpose({
    showDio
})

</script>

<style scoped></style>